<template>
    <div class="iframe">
        <div class="i-title">
            <h3>变量修改</h3>
        </div>
        <div class="i-tip">
            <el-input type="text" v-model="name" />
            <div class="i-tip">{{ name }}</div>
        </div>
        <div class="i-tip">
            <el-input type="text" v-model="stus[2]" />
        </div>
        <div class="i-tip flex">
            <el-tag class="tag" :key="index" v-for="(item, index) in stus" closable @close="cls(index)">
                {{ item }}
            </el-tag>
        </div>
        <div class="i-tip">
            <el-button @click="change()">修改</el-button>
        </div>
    </div>
</template>
<script setup>
import { ref, reactive } from "vue";
// 1.定义变量
let name = ref("四大名著");
let stus = reactive(["水浒传", "三国演义", "西游记", "红楼梦"]);

// 2.定义方法
const change = () => {
    if (stus.length > 2) {
        name.value = "戏说" + name.value;
        stus[2] = "东逛集";
    }
}
// 3.删除数组
const cls = (index) => {
    stus.splice(index, 1)
}
</script>
<style scoped>
.flex {
    display: flex;
    align-items: center;
}

.tag {
    margin-right: 10px;
}
</style>
